<template>
	<view class="fixAuto bb middle">
		<view class="w80">
			{{title}}
		</view>
		<view class="father">
			<view class="flex rt" :style="textStyle">
				<view class="mr10">
					{{list[curIndex].title}}
				</view>
				<view class="sIcon-arrowRight grey fz12"></view>
			</view>
			<picker v-if="!disabled" class="abs op0" mode="selector" :range="list" range-key="title" @change="change">
				<view class="abs op0">当前选择的值</view>
			</picker>
			<input type="text" :name="name" :value="list[curIndex].value" style="display: none;">
		</view>
	</view>
</template>

<script>
	export default {
		name:"simple-picker",
		props:{
			title : {
				type : String ,
				default : ""
			},
			name : {
				type : String ,
				default : ""
			},
			value : {
				type : String ,
				default : ""
			},
			disabled : {
				type : Boolean ,
				default : false
			},
			list : {
				type : Array ,
				default : function(e){
					return [ 
						{title : "正常" , color : "#000" , value : "正常"} ,
						{title : "故障" , color : "#FF9800" , value : "故障"} ,
						{title : "无" , color : "red" , value : "无"}
					] ;
				},
			}
		},
		data() {
			return {
				curIndex : 0 
			};
		},
		computed:{
			textStyle : function(e){
				return `color : ${this.list[this.curIndex].color} ;` ;
			}
		},
		watch:{
			value : {
				immediate : true ,
				handler : function(e){
					this.curIndex = !this.value ? 0 : this.list.findIndex(item=>item.value == this.value ) ;
				}
			}
		},
		methods:{
			change:function(e){
				this.curIndex = e.detail.value ;
				this.$emit("change" , e);
			},
		}
	}
</script>

<style>

</style>
